{#{% extends 'base.html' %}#}
{% extends 'layout.html' %}
{#{% load static %}#}
{#{% block title %}数据采集白名单{% endblock %}#}

{#{% block contentmain %}#}
{% block content %}
    <div class="container-fluid" style="margin-top:55px;">
        <!-- 查询表单 -->
        <div class="row" style="margin: 2px">
            <div class="col-md-12" style="padding-left: 0px">
                <form class="form-horizontal" role="form" target="iframe">
                    {% csrf_token %}
                    <div class="form-group" style="margin-bottom: 5px">
                        <!-- 领域输入 -->
                        <div class="col-sm-1 control-label">领域</div>
                        <div class="col-sm-2">
                            <select id="domain" class="form-control" mustwrite="true" title="领域">
                                {% for domain in obj_list %}
                                    <option value="{{ domain }}">{{ domain }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <!-- 账号/姓名输入 -->
                        <div class="col-sm-1 control-label"><span class="required" style="color:red">*</span>账号</div>
                        <div class="col-sm-2">
                            <input id="operation_user" type="text" class="form-control">
                        </div>
                        <!-- 账号/姓名输入 -->
                        <div class="col-sm-1 control-label"><span class="required" style="color:red">*</span>姓名</div>
                        <div class="col-sm-2">
                            <input id="operation_user_name" type="text" class="form-control">
                        </div>
                        <!-- 岗位输入 -->
                        <div class="col-sm-1 control-label"><span class="required" style="color:red">*</span>岗位</div>
                        <div class="col-sm-2">
                            <input id="position" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group" style="margin-bottom: 0px;" style="border: 1px solid #000;">
                        <div style="margin-bottom: 0px;" class="col-sm-12">
                            <button id="btnExt" type="button" class="btn btn-primary queryButton pull-right" style="margin-left: 10px;">查询</button>
                            <button id="restid" type="button" class="btn queryButton pull-right" style="margin-left: 10px;">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 操作工具栏 -->
        <div id="toolbar" class="row" style="margin-top: 0px;margin-bottom: -5px;">
            <div class="btn-group" style="margin-left: 10px">
                {#        {% if perms.tools.add_ttestapiwebuser %}#}
                <button id="add" class="btn btn-primary btn-xs" style="margin-left: 10px">新增</button>
                {#        {% endif %}#}
                {#        {% if perms.tools.change_ttestapiwebuser %}#}
                <button id="modify" class="btn btn-primary btn-xs" style="margin-left: 10px">修改</button>
                {#        {% endif %}#}
                {#        {% if perms.tools.delete_ttestapiwebuser %}#}
                <button id="delete" class="btn btn-primary btn-xs" style="margin-left: 10px">删除</button>
                {#        {% endif %}#}
{#                <button id="btnExt" class="btn btn-primary queryButton" style="margin-left: 10px">查询</button>#}
{#                <button id="restid" class="btn queryButton" style="margin-left: 10px">重置</button>#}
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="row" style="margin: 8px;margin-top: -10px;">
            <div class="col-sm-12">
                <table id="articles-table" data-toggle="table" class="table table-hover table-bordered table-responsive text-nowrap table-striped">
                    <!-- 表格内容通过JS动态加载 -->
                </table>
            </div>
        </div>
    </div>

        <!-- 新增人员模态框 -->
    <div class="modal fade" id="add-article-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">添加人员白名单</h4>
                </div>
                <form id="add-modal-form" class="form-horizontal">
                    <div class="modal-body">
                        <input type="hidden" id="add-modal-id">
                        <!-- 包含与主表单相同的字段 -->
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{#    <!--新增-->#}
{#    <div class="modal fade" id="add-article-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"#}
{#         aria-hidden="true">#}
{#        <div class="modal-dialog" role="document">#}
{#            <div class="modal-content">#}
{#                <div class="modal-header">#}
{#                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>#}
{#                    <h4 class="modal-title">添加人员白名单</h4>#}
{#                </div>#}
{#                <form id="add-modal-form" class="form-horizontal" action="">#}
{#                    <div class="modal-body">#}
{#                        <input type="hidden" id="add-modal-id"/>#}
{##}
{#                        <div class="form-group row">#}
{#                            <label class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-right"><span#}
{#                                    class="required" style="color:red">*</span>领域：</label>#}
{#                            <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">#}
{#                                <select id='add_domain' class="form-control" type="text" mustwrite="true" title="领域">#}
{#                                    {% for domain in obj_list %}#}
{#                                        <option value="{{ domain }}">{{ domain }}</option>#}
{#                                    {% endfor %}#}
{#                                </select>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="form-group row">#}
{#                            <label class="col-sm-3 col-md-3 col-lg-3col-xl-3 control-label font-normal align-right"><span class="required"#}
{#                   style="color:red">*</span>账号：</label>#}
{#                            <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">#}
{#                                <div class="file-input-container">#}
{#                                    <input type="text" id="add_operation_user" class="form-control"/>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{##}
{#                        <div class="form-group row">#}
{#                            <label class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-right"><span class="required" style="color:red">*</span>姓名：</label>#}
{#                            <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">#}
{#                                <div class="file-input-container">#}
{#                                    <input type="text" id="add_operation_user_name" class="form-control"/>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="form-group row">#}
{#                            <label class="col-sm-3 col-md-3 col-lg-3 col-xl-3 control-label font-normal align-right"><span class="required" style="color:red">*</span>岗位：</label>#}
{#                            <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">#}
{#                                <div class="file-input-container">#}
{#                                    <input type="text" id="add_position" class="form-control"/>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="modal-footer">#}
{#                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>#}
{#                        <button type="submit" class="btn btn-success" id="submit-button">发送</button>#}
{#                    </div>#}
{#                </form>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

{% endblock %}

{% block js %}
    <script>
        toastr.options.positionClass = 'toast-top-center';
        toastr.options.timeOut = '2000';
    </script>

    <script>
        {#setScroll();#}
        var changeRows = new Array();
        var $articlesTable = $('#articles-table').bootstrapTable('destroy').bootstrapTable({
            url: "{% url 'search_data_collection_whitelist' %}",
            method: 'GET',
            dataType: "json",
            uniqueId: 'id',
            striped: true,
            cache: true,
            sortable: true,
            clickEdit: true,
            editable: true,
            theadClasses: "bg-info",//这里设置表头样式
            sidePagination: "server",
            resizable: true, //可调整列宽度
            height: parseInt($
            (window).height()) - 126, //动态获取高度值，可以使表格自适应页面
            undefinedText: '0',
            singleSelect: false,
            toolbar: '#toolbar',
            {#search: true,#}
            {#showToggle: true,          //是否显示详细视图和列表视图的切换按钮#}
            {#showRefresh: true,          //是否显示刷新按钮#}
            {#showColumns: true,          //是否显示所有的列#}
            strictSearch: true,
            clickToSelect: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 200,
            pageList: [200, 500, 1000, 2000],
            smartDisplay: false,
            paginationPreText: "上一页",
            queryParamsType: "",
            {#fixedColumns: true,#}
            {#fixedNumber: 1,#}
            {#fixedFrom: 'left', // 左侧为 left#}
            queryParams: function (params) {
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    sortName: params.sortName,
                    sortOrder: params.sortOrder,
                    domain: $("#domain").val(),
                    operation_user: $("#operation_user").val(),
                    operation_user_name: $("#operation_user_name").val(),
                    position: $("#position").val(),
                };
                return param;
            },
            columns: [{
                checkbox: true,
                visible: true,        //是否显示复选框
            }, {
                field: 'domain',
                title: '领域',
                align: 'center',
            }, {
                field: 'operation_user',
                title: '账号',
                align: 'center',
            }, {
                field: 'operation_user_name',
                title: '姓名',
                align: 'center',
            }, {
                field: 'position',
                title: '岗位',
                align: 'center',
            }, {
                field: 'create_by',
                title: '创建人',
                align: 'center',
            }, {
                field: 'create_date',
                title: '创建时间',
                align: 'center',
            }, {
                field: 'last_update_by',
                title: '更新人',
                align: 'center',
            }, {
                field: 'last_update_date',
                title: '更新时间',
                align: 'center',
            }],
            onLoadError: function () {
                toastr.error("数据加载失败！", "错误提示");
            },
            onClickRow: function (row, $element) {
                // EditViewById(id, 'view');
            },

        });
    </script>

    <script>
        //查询
        $('#btnExt').on('click', function () {
            $('#articles-table').bootstrapTable('refresh');
        });
        //重置按钮
        $('#restid').on('click', function () {
            $("#operation_user").val("");
            $("#operation_user_name").val("");
            $("#position").val("");
        });

        //新增
        $("#add").click(function () {
            $("#add-article-modal").modal("show");
        })
        $("#submit-button").click(function (e) {
            e.preventDefault();
            $.ajax({
                    cache: false,
                    type: "POST",
                    url: '{% url 'insert_data_collection_whitelist' %}',
                    //traditional: true, //加上此项可以传数组
                    dataType: 'json',
                    data: {
                        domain: $("#add_domain").val(),
                        operation_user: $("#add_operation_user").val(),
                        operation_user_name: $("#add_operation_user_name").val(),
                        position: $("#add_position").val(),
                    },
                    success: function (data) {
                        if (data.ret) {
                            $("#add-article-modal").modal("hide");
                            toastr.success("数据添加成功！", "成功提示！");
                            $articlesTable.bootstrapTable("refresh");
                        } else {
                            toastr.warning(data.msg, "告警提示！");
                        }
                    }
                });
            });

    </script>
{% endblock %}
